---
title: Use with TanStack Router - Flowbite React
description: Learn how to install Flowbite React with TanStack Router and start developing with the modern type-safe router for React applications
---

This guide provides three ways to integrate Flowbite React with TanStack Router:

1. [Quick Start](#quick-start): Create a new project with everything pre-configured
2. [Add to Existing Project](#add-to-existing-project): Add Flowbite React to an existing TanStack Router project
3. [Manual Setup](#manual-setup): Set up everything from scratch manually

<TextDivider>Quick Start (Recommended)</TextDivider>

## Quick Start

The fastest way to get started is using our project creation CLI, which sets up a new TanStack Router project with Flowbite React, Tailwind CSS, and all necessary configurations:

```bash
npx create-flowbite-react@latest -t tanstack-router
```

This will:

- Create a new TanStack Router project
- Install and configure Tailwind CSS
- Set up Flowbite React with all required dependencies
- Configure example routes and components

<TextDivider>Add to Existing Project</TextDivider>

## Add to Existing Project

If you already have a TanStack Router project and want to add Flowbite React, you can use our initialization CLI:

```bash
npx flowbite-react@latest init
```

This will automatically:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Set up necessary configurations

<TextDivider>Manual Setup</TextDivider>

## Manual Setup

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

### 1. Create Project

Create a new TanStack Router project:

```bash
npx @tanstack/create-router@latest
```

### 2. Configure Tailwind CSS

1. Install Tailwind CSS and its Vite plugin:

```bash
npm install -D tailwindcss @tailwindcss/vite
```

2. Configure the Vite plugin in your `vite.config.ts`:

```ts {1,14}
import tailwindcss from "@tailwindcss/vite";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    TanStackRouterVite({
      target: "react",
      autoCodeSplitting: true,
    }),
    react(),
    tailwindcss(),
  ],
});
```

3. Create a new CSS file (`src/index.css`):

```bash
touch src/index.css
```

4. Add Tailwind CSS to your CSS file (`src/index.css`):

```css
@import "tailwindcss";
```

5. Import the CSS file in your `src/main.tsx` file:

```tsx
import "./index.css";
```

6. Remove Tailwind CSS browser script from the `index.html` file, since we are using the Vite plugin (recommended):

```html
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  html {
    color-scheme: light dark;
  }
  * {
    @apply border-gray-200 dark:border-gray-800;
  }
  body {
    @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
  }
</style>
```

### 3. Install Flowbite React

Install Flowbite React:

```bash
npx flowbite-react@latest init
```

This will:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Configure Vite to include Flowbite React plugin

## Try it out

Now you can start using Flowbite React components in your routes:

```tsx
// src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router";
import { Button } from "flowbite-react";

export const Route = createFileRoute("/")({
  component: HomeComponent,
});

function HomeComponent() {
  return (
    <div className="p-2">
      <Button>Click me</Button>
    </div>
  );
}
```

<hr />

## Templates

- [Github](https://github.com/themesberg/flowbite-react-template-tanstack-router)
- [StackBlitz](https://stackblitz.com/edit/flowbite-react-template-tanstack-router)
